<template>
  <view class="detail-container">
    <!-- 状态栏与标题 -->
    <view class="status-bar"></view>
    <view class="header">
      <text class="title">工作量详情</text>
      <view :class="['status-tag', statusClass]">
        {{ statusMap[detail.status] }}
      </view>
    </view>

    <!-- 主体内容 -->
    <scroll-view scroll-y class="content-wrapper">
      <!-- 基础信息 -->
      <uni-list class="info-section">
      
        <uni-list-item v-if="detail.status == 3" title="工作量分值" :rightText="detail.workload.toString()" />
        <uni-list-item title="选择时间" :rightText="detail.submitTime" />
        <uni-list-item title="申请人姓名" :rightText="detail.name" />
        <uni-list-item title="学号" :rightText="detail.studentId" />
        <uni-list-item title="联系方式" :rightText="detail.contact" />
        <uni-list-item title="小组编号" :rightText="detail.groupNum" />
        <!-- <uni-list-item title="用户ID" :rightText="detail.userId.toString()" /> -->
      </uni-list>

      <!-- 描述说明 -->
      <view class="description-section" v-if="detail.status==4||detail.status==3">
		  <view v-if="detail.status==4">
			  <text class="section-title">管理员描述</text>
			  <text class="content-text4">{{ detail.remark }}</text>
		  </view>
		  <view v-if="detail.status==3">
		  			  <text class="section-title">管理员描述</text>
		  			  <text class="content-text">{{ detail.remark }}</text>
		  </view>
    
      </view>

      <!-- 佐证材料 -->
	    <uni-list-item title="文件标题" :rightText="detail.title" />
      <view class="file-section">
        <text class="section-title">佐证材料（{{ detail.files.length }}份）</text>
        <!-- <uni-file-picker 
          v-model="detail.files"
          readonly
          :image-styles="{width: '200rpx', height: '200rpx'}"
          @preview="previewFile"
        /> -->
      </view>

      <!-- 描述说明 -->
      	<!-- 模板中给按钮添加类名 -->
    <view v-if="detail.status==='4'" class="modify-btn" @click="gotoUpdate">修改</view>
    </scroll-view>

  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '../../../utils/requestUtil';

// 状态映射配置
const statusMap = {
  '0': '审核中',
  '1': '审核中',
  '2': '审核中',
  '3': '已通过',
  '4': '已驳回'
}

const typeMap = {
  project: '项目积分',
  training: '培训积分',
  activity: '活动积分'
}

// 详情数据模型
const detail = ref({
  submitId: '',
  type: 'project',
  workload: 0,
  remark: '',
  files: [],
  submitTime: '2025-03-21 14:30',
  status: '0', // 0-审核中 1-已通过 2-已驳回
  name: '',
  studentId: '',
  contact: '',
  groupNum: '',
  userId: 0
})
const gotoUpdate=()=>{
	uni.navigateTo({
		url:"/pages/markIntegration/updateMark/updateMark?id="+detail.value.submitId
	})
}
// 状态样式动态绑定
const statusClass = () => {
  return {
    '0': 'status-pending',
	  '1': 'status-pending',
	    '2': 'status-pending',
    '3': 'status-approved',
    '4': 'status-rejected'
  }[detail.value.status]
}

// 文件预览处理（参考网页3）
const previewFile = (e) => {
  uni.previewImage({
    urls: detail.value.files.map(f => f.url),
    current: e.tempFilePath
  })
}

// 加载数据（参考网页4的参数传递）
onLoad((options) => {
  if (options.id) {
    loadDetailData(options.id)
  }
  // uni.$on('refreshData', loadDetailData(options.id));
})

// 模拟数据加载
const loadDetailData = async (id) => {
  try {
    const resData = (await http.get('/remark/project/user/' + id)).data;
    console.log(resData);
    const files = resData.workFile? resData.workFile.split(',') : [];
    detail.value = {
     ...resData,
      files: files
    };
    console.log(detail.value);
  } catch (error) {
    console.error('数据加载失败:', error);
    uni.showToast({ title: '数据加载失败', icon: 'none' });
  }
}
</script>


<style>
	.detail-container {
	  background: #f8f9fa;
	  min-height: 100vh;
	}
	
	.detail-container .status-bar {
	  height: var(--status-bar-height);
	}
	
	.detail-container .header {
	  padding: 24rpx;
	  background: white;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.detail-container .header .title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.detail-container .header .status-tag {
	  padding: 8rpx 24rpx;
	  border-radius: 48rpx;
	  font-size: 24rpx;
	}
	
	.detail-container .header .status-tag.status-pending {
	  background: #fff3e0;
	  color: #ffa726;
	}
	
	.detail-container .header .status-tag.status-approved {
	  background: #e8f5e9;
	  color: #66bb6a;
	}
	
	.detail-container .header .status-tag.status-rejected {
	  background: #ffebee;
	  color: #ef5350;
	}
	
	.detail-container .content-wrapper {
	  height: calc(100vh - 200rpx);
	  padding-top: 24rpx;
	}
	
	.detail-container .content-wrapper .section-title {
	  display: block;
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 16rpx;
	}
	
	.detail-container .content-wrapper .info-section {
	  margin-bottom: 32rpx;
	  border-radius: 16rpx;
	  overflow: hidden;
	}
	
	.detail-container .content-wrapper .description-section {
	  padding: 24rpx;
	  background: white;
	  border-radius: 16rpx;
	  margin-bottom: 32rpx;
	}
	
	.detail-container .content-wrapper .description-section .content-text {
	  font-size: 28rpx;
	  color: skyblue;
	  line-height: 1.6;
	}
	.detail-container .content-wrapper .description-section .content-text4 {
	  font-size: 28rpx;
	  color: red;
	  line-height: 1.6;
	}
	
	.detail-container .content-wrapper .file-section {
	  padding: 24rpx;
	  background: white;
	  border-radius: 16rpx;
	}
	/* 新增按钮样式 */
	.modify-btn {
		text-align: center;
	  /* 基础样式 */
	  padding: 18rpx 48rpx;
	  border-radius: 28rpx;
	  font-size: 30rpx;
	  /* font-weight: 500; */
	  cursor: pointer;
	  margin: 32rpx auto 0; /* 水平居中 */
	  max-width: 240rpx; /* 限制最大宽度 */
	  
	  /* 视觉样式 */
	  background: #4a90e2; /* 主色调蓝色 */
	  color: #ffffff;
	  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); /* 投影效果 */
	  
	  /* 交互反馈 */
	  transition: all 0.2s ease;
	}
	
	.modify-btn:hover {
	  transform: translateY(-2rpx);
	  box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.3);
	}
	
	.modify-btn:active {
	  transform: translateY(1rpx);
	  box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.2);
	}
</style>